<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增参数')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .fileinput-upload-button {
            display: none !important;
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-config-add" name="form-config-add" enctype="multipart/form-data"
          th:object="${excellence}">
        <input id="excellenceId" name="excellenceId" type="hidden" th:field="*{excellenceId}"/>

        <div class="form-group">
            <div style="width: 73%;margin-left: 130px">
                <label class="font-noraml">附件:</label>
                <div class="file-loading">
                    <input class="file" type="file" id="filePath" name="commoPicArr" multiple>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">描述：</label>
            <div class="col-sm-8">
                <textarea id="describe" name="describe" class="form-control" th:field="*{describe}"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">月份：</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="monthTime" name="monthTime" th:field="*{monthTime}"
                       placeholder="yyyy-MM">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var fileArr = new Array();
    var prefix = ctx + "excellenceMonitor";
    var excellenceId;

    var excellence = [[${excellence}]];
    var detailId = excellence.detailId;
    fileArr.push(excellence.filePath);

    excellenceId = excellence.excellenceId;
    if (fileArr != '' || fileArr != null) {
        $('#filePath').fileinput({
            language: 'zh',                                        //语言
            uploadUrl: '<%=basePath%>/commodity/addCommodityPic',   //上传地址

            showPreview: true,				//展前预览
            showUpload: false,				//显示上传按钮
            showCaption: false,				//显示文字表述
            uploadAsync: false,                             //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
            removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
            maxFileCount: 5,
            maxFileSize: 1024 * 10,			//单位为kb，如果为0表示不限制文件大小
            allowedFileExtensions: ["jpg", "jpeg", "gif", "png", "bmp", "pdf", "doc", "docx"],
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: fileArr,
            initialPreviewConfig: [ //配置预览中的一些参数
                {
                    caption: "transport-1.jpg",
                    size: 329892,
                    width: "120px",
                    url: "deletePic",
                    key: detailId
                },
                {
                    caption: "transport-2.jpg",
                    size: 872378,
                    width: "120px",
                    url: "deletePic",
                    key: detailId
                }
            ]
        }).on('filepredelete', function (event, key, jqXHR, data) {
            console.log('Key = ' + key);
            console.log(jqXHR);
            console.log(data);
        });
    }

    function submitHandler() {
        var formData = new FormData();
        if ($('#filePath')[0].files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }

        if ($('#filePath')[0].files[1] != null) {
            $.modal.alertWarning("仅支持单文件上传");
            return false;
        }

        if ($("#describe").val() == null || $("#describe").val() == '') {
            $.modal.alertWarning("请填写描述信息");
            return false;
        }

        if ($("#monthTime").val() == null || $("#monthTime").val() == '') {
            $.modal.alertWarning("请填写月份");
            return false;
        }

        formData.append('excellenceId', excellenceId);
        formData.append('describe', $("#describe").val());
        formData.append('file', $('#filePath')[0].files[0]);
        formData.append('detailId', excellence.detailId);
        formData.append('monthTime', $("#monthTime").val());

        $.ajax({
            url: prefix + "/updateExcellenceDetail",
            type: 'post',
            cache: false,   //上传文件不需要缓存
            data: formData,
            processData: false, //data值是FormData对象，不需要对数据进行处理
            contentType: false, //contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
            dataType: "json",
            success: function (result) {
                $.operate.successCallback(result);
            }
        });
    }

    $(function () {
        bindDatetimepicker();
    });

    function bindDatetimepicker() {
        setTimeout(function () {
            $('#monthTime').datetimepicker({
                format: 'yyyy-mm',
                weekStart: 1,
                autoclose: true,
                startView: 3,
                minView: 3,
                forceParse: false,
                // 中文
                language: 'zh-cn'
            });
        }, 100)
    }
</script>
</body>
</html>
